<template>
	<view>
		<view class="bg"></view>
		<view class="info">
			<view class="top">
				<image :src="info.logo"></image>
				<view class="shopname">{{info.supname}}</view>
			</view>
			<view class="num">
				<view class="number"><text class="small">￥</text>{{info.usemoney}}</view>
				<view class="tip">多米街用户可消费额度</view>
			</view>
		</view>
		<view class="record">
			<view class="head">
				<view :class="{'active':current==0}" @click="change(0)">充值记录</view>
				<view :class="{'active':current==1}" @click="change(1)">退款记录</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in list">
					<view class="left">
						<view class="tit">充值现金：{{item.money}}<text class="tag">{{Number(item.discount).toFixed(2)}}折</text></view>
						<view class="send">赠送额度：{{item.givemoney}}</view>
					</view>
					<view class="right">
						<view class="cash">+{{item.allmoney}}</view>
						<view class="time">{{item.createtime}}</view>
					</view>
				</view>
				<view class="empty_loading">
					<image v-show="isloading" src="/static/business/loading.gif" mode=""></image>
					<text v-show="!ismore">到底了~</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				id: 0,
				list: [],
				info: [],
				isloading: false,
				ismore: false,
				page: 0,
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			getList(){
				this.page++;
				this.isloading = true;
				this.$axios('groupchange/suplist','POST','supplier',{
					page: this.page,
					uid: this.id,
					type: this.current
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.info = res.data.data.info
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			change(id){
				if(id==this.current) return;
				this.current = id;
				this.page = 0;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #FBF8FE;
	padding-bottom: 40rpx;
}
.bg{
	height: 500rpx;
	background: #F0E1FF;
}
.info{
	width: 94%;
	height: 306rpx;
	background: linear-gradient( 135deg, #B92DF1 0%, #8A17E2 100%);
	border-radius: 24rpx;
	padding: 20rpx;
	color:#fff;
	margin: auto;
	margin-top: -470rpx;
	.top{
		display: flex;
		align-items: center;
		image{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.shopname{
			font-size: 32rpx;
			font-weight: 600;
		}
	}
	.num{
		text-align: center;
		margin-top: 20rpx;
		.number{
			font-size: 48rpx;
			font-weight: 600;
			margin-bottom: 8rpx;
			.small{
				font-size: 32rpx;
			}
		}
		.tip{
			font-size: 28rpx;
		}
	}
}
.record{
	background: #FBF8FE;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	font-size: 28rpx;
	color: #333333;
	margin-top: -60rpx;
	padding-bottom: 70rpx;
	.head{
		display: flex;
		justify-content: space-around;
		font-weight: 600;
		line-height: 4;
		view{
			position: relative;
		}
		.active::after{
			content: '';
			width: 46rpx;
			height: 8rpx;
			background: #8615E1;
			position: absolute;
			bottom: 10rpx;
			left: 0;
			right: 0;
			margin: auto;
			border-radius: 4rpx;
		}
	}
	.list{
		padding: 0 20rpx;
		.item{
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 1.8;
			margin-bottom: 20rpx;
			.left{
				font-weight: 600;
				.tit{
					display: flex;
					align-items: center;
				}
				.tag{
					border-radius: 4rpx;
					height: 30rpx;
					line-height: 30rpx;
					border: 2rpx solid #8615E1;
					font-size: 20rpx;
					color: #8615E1;
					text-align: center;
					margin-left: 10rpx;
					padding: 0 6rpx;
					font-weight: 400;
				}
				.send{
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
				}
			}
			.right{
				text-align: right;
				.cash{
					color: #8615E1;
					font-weight: 600;
				}
				.time{
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
}
</style>
